<template>
<div>
  <!-- 搜索表单 -->
  <el-form :inline="true" :model="searchform" class="demo-form-inline">
          <el-form-item>
              <el-input v-model="searchform.heroName" placeholder="英雄名称"></el-input>
          </el-form-item>
          <el-form-item>
              <el-select v-model="searchform.heroPosition" multiple placeholder="英雄定位">
                  <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                  </el-option>
              </el-select>
          </el-form-item>
          <!-- 搜索英雄按钮 -->
          <el-form-item>
              <el-button type="primary" @click="searchherobyheronameandposition"><i class="el-icon-search"></i></el-button>
          </el-form-item>
          <!-- 添加英雄按钮 -->
          <el-button icon="el-icon-plus" circle style="margin-left:400px" @click="addHeroDialogVisible = true"></el-button>
          <!-- 一键删除按钮 -->
          <el-button type="danger" plain @click="multidel">一键删除</el-button>
        </el-form>
        <!-- 添加英雄对话框 -->
        <el-dialog
            title="添加英雄"
            :visible.sync="addHeroDialogVisible"
            width="30%"
            center>
            <el-form  label-width="80px" :model="addHeroform">
              <el-form-item label="英雄名称">
                <el-input v-model="addHeroform.heroName"></el-input>
              </el-form-item>   

              <el-form-item label="英雄定位">
                <el-select v-model="addHeroform.heroPosition" multiple placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="英雄头像">
                <el-upload
                  class="avatar-uploader"
                  action="http://localhost:8080/accounts/handleImage"
                  :show-file-list="false"
                  :on-success="addHerohandleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="addHeroform.heroImageUrl" :src="addHeroform.heroImageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addHeroDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addHero">添 加</el-button>
              </span>
        </el-dialog>
        <!-- 修改英雄对话框 -->
        <el-dialog
            title="修改英雄"
            :visible.sync="updateHeroDialogVisible"
            width="30%"
            center>
            <el-form-item>
              <el-input type="hidden" v-model="updateHeroform.heroId"></el-input>
            </el-form-item>
            <el-form  label-width="80px" :model="updateHeroform">
              <el-form-item label="英雄名称">
                <el-input v-model="updateHeroform.heroName"></el-input>
              </el-form-item>   
              <el-form-item label="英雄定位">
                <el-select v-model="updateHeroform.heroPosition" multiple>
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="英雄头像">
                <el-upload
                  class="avatar-uploader"
                  action="http://localhost:8080/accounts/handleImage"
                  :show-file-list="false"
                  :on-success="updateHerohandleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="updateHeroform.heroImageUrl" :src="updateHeroform.heroImageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updateHeroDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateHero">修 改</el-button>
              </span>
        </el-dialog>
        <!-- 表格 -->
    <el-table
        :data="HeroestableData"
        style="width: 100%"
        :default-sort = "{prop: 'addDate', order: 'descending'}"
        @selection-change="handleSelectionChange"
        >
        <el-table-column
        type="selection"
        width="80">
        </el-table-column>
        <el-table-column
        prop="heroImage"
        label="英雄图片"
        align="center"
        width="200px"
        >
        <template slot-scope="scope">
          <el-image
          style="width: 100px; height: 100px"
          :src="scope.row.heroImageUrl"
          ></el-image>
        </template>
        </el-table-column>
        <el-table-column
          prop="heroName"
          label="英雄名称"
          sortable
          align="center"
          width="180px">
        </el-table-column>

        <el-table-column
          prop="heroPosition"
          label="英雄定位"
          align="center"
          width="200px">
        </el-table-column>

        <el-table-column
          prop="heroAddtime"
          label="操作时间"
          align="center"
          sortable
          width="200px">
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
          width="200px">
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-edit" @click="reshow(scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" @click="deletehero(scope.row)"></el-button>
          </template>
        </el-table-column>        
       
    </el-table>
     <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20, 25]"
          :page-size="pageSize"
          style="margin-top:20px"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
     </div>
</div>
</template>

<script>
import axios from 'axios';
  export default {
    data() {
      return {
        //分页默认值
        currentPage: 1,
        pageSize:5,
        total:0,
        // fits: ['contain'],
        HeroestableData: [],
        multipleSelection: [],
        // 搜索表单返回值
        searchform: {
          heroName: '',
          heroPosition: []
        },
        // 添加表单返回值
        addHeroform:{
          heroName:'',
          heroPosition:[],
          heroImageUrl:''
        },
        updateHeroform:{
          heroId:'',
          heroName:'',
          heroPosition:[],
          heroImageUrl:''
        },
        //修改英雄对话框返回值
        updateHeroDialogVisible: false,
        //添加英雄对话框返回值
        addHeroDialogVisible: false,
        options: [{
          value: '1',
          label: '战士'
        }, {
          value: '2',
          label: '法师'
        }, {
          value: '3',
          label: '刺客'
        }, {
          value: '4',
          label: '辅助'
        }, {
          value: '5',
          label: '坦克'
        }, {
          value: '6',
          label: '射手'
        }]
      }
    },
    mounted(){
      this.tableInit();
    },
    methods: {
      tableInit(){
        axios.get("http://localhost:8080/heroes/selectbypage?currentPage="+this.currentPage+"&pageSize="+this.pageSize)
             .then(result=>{
                this.HeroestableData=result.data.data.rows;
                this.total=result.data.data.totalCount;
             })
      },
      //点击一键删除按钮执行
      multidel(){
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios({
            headers:{
              "Content-Type":"application/json"
            },
            method:"delete",
            url:"http://localhost:8080/heroes/deleteherobyids",
            data:this.multipleSelection
            })
             .then(result=>{
              if(result.data.code==1){
                this.tableInit();
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
              }
             })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
          this.multipleSelection=[];
          this.tableInit();
        });
      },
      //处理多选框
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      //处理分页
       handleSizeChange(val) {
        this.pageSize=val;
        this.tableInit();
      },
      handleCurrentChange(val) {
        this.currentPage=val;
        this.tableInit();
      },
      //提交搜索表单
      searchherobyheronameandposition() {
        axios.post("http://localhost:8080/heroes/searchhero",this.searchform)
             .then(res=>{
              if(res.data.code==1){
                this.totalCount=res.data.data.totalCount;
                this.HeroestableData=res.data.data.rows;
              }
             })
      },
      //添加英雄
      addHero(){
        if(this.addHeroform.heroName==""){
          this.$message.error('英雄名称不能为空！');
          return;
        }
        if(this.addHeroform.heroPosition==""){
          this.$message.error('英雄职位不能为空！');
          return;
        }
        if(this.addHeroform.heroImageUrl==""){
          this.$message.error('英雄图片不能为空！');
          return;
        }
        // 发送添加英雄请求
        axios.post("http://localhost:8080/heroes/addhero",this.addHeroform)
             .then(result=>{
               if(result.data.code==1){
                 this.addHeroDialogVisible=false;
                 this.$message({
                            message: '添加成功',
                            type: 'success'
                      });
                  this.tableInit();
               }else if(result.data.code==0){
                   this.$message.error(result.data.msg);
               }
               //清空添加英雄表单
                  this.addHeroform={
                    heroName:'',
                    heroPosition:[],
                    heroImageUrl:''
                  }
             })
      },
      //回显英雄数据
      reshow(row){       
        this.updateHeroDialogVisible=true;
        axios.get("http://localhost:8080/heroes/reshow?heroId="+row.heroId)
              .then(result=>{
                this.updateHeroform=result.data.data;
              })      
      },
      //修改英雄信息
      updateHero(){
        axios.put("http://localhost:8080/heroes/updatehero",this.updateHeroform)
              .then(result=>{
                if(result.data.code==1){
                  this.$message({
                            message: '修改成功',
                            type: 'success'
                      });
                      this.tableInit();
                }
              });
        //关闭对话框更新表格
        this.updateHeroDialogVisible=false;
      },
      //删除英雄
      deletehero(row){
         this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.delete("http://localhost:8080/heroes/deletehero/"+row.heroId)
             .then(result=>{
              if(result.data.code==1){
                this.tableInit();
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
              }
             })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      addHerohandleAvatarSuccess(res) {
        this.addHeroform.heroImageUrl = res.data;
      },
      updateHerohandleAvatarSuccess(res) {
        this.updateHeroform.heroImageUrl = res.data;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isWEBP = file.type === 'image/webp';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG && !isWEBP) {
          this.$message.error('上传头像图片只能是 JPG/WEBP 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return (isWEBP || isJPG) && isLt2M;
      }
    }
  }
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>